<template>
  <div id="excellentPersonnelChart"></div>
</template>

<script>
import { defineComponent, ref, onMounted, nextTick, computed } from 'vue';
export default defineComponent({
  name: 'ExcellentPersonnelChart',
});
</script>
<script setup>
import * as echarts from 'echarts';
import 'echarts-gl';
import { useLargeDataScreenStore } from '@/store';
import myUtils from '@/utils/myUtils';

const largeDataScreenStore = useLargeDataScreenStore();

const valueComp = computed(() => {
  let arr = [];
  myUtils.arrSortB(largeDataScreenStore.excellentPersonnel).forEach((item) => {
    arr.push(item.value);
  });
  return arr;
});

const labelComp = computed(() => {
  let arr = [];
  myUtils.arrSortB(largeDataScreenStore.excellentPersonnel).forEach((item) => {
    arr.push(item.label);
  });
  return arr;
});

nextTick(() => {
  let dom = document.getElementById('excellentPersonnelChart');
  console.log(dom);
  let myChart = echarts.init(dom, null, {
    renderer: 'svg', // 设置渲染方式为 SVG
  });

  let ranking1 = ``;
  let ranking2 = ``;
  let ranking3 = ``;
  let ranking4 = ``;
  let ranking5 = ``;
  let ranking6 = ``;
  let chartIcon = ``;
  let option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#081429',
      textStyle: {
        color: '#fff',
      },
      borderColor: 'rgba(255,255,255,.2)',
      axisPointer: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)',
        },
      },
    },
    grid: {
      containLabel: true,
      // 边距自行修改
      bottom: '-7%',
      left: '3%',
      top: '7%',
      right: '3%',
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        type: 'category',
        data: labelComp.value,
        inverse: true,
        axisLabel: {
          fontSize: '18px',

          inside: true,
          verticalAlign: 'bottom',
          lineHeight: 42,
          margin: 0, //刻度标签与轴线之间的距离
          formatter: function (value, index) {
            if (index > 2) {
              return `{z|}{img${index}|}{z|} {a|${value}}`;
            }
            return `{img${index}|} {a|${value}}`;
          },
          rich: {
            a: {
              fontSize: '14px',
              fontFamily: 'fontShuHeiTi',
              color: '#D6E0FC',
              padding: [4, 0, 0, 0],
            },
            img0: {
              width: 34,
              height: 24,
              backgroundColor: {
                image: ranking1,
              },
            },
            img1: {
              width: 34,
              height: 24,
              backgroundColor: {
                image: ranking2,
              },
            },
            img2: {
              width: 34,
              height: 24,
              backgroundColor: {
                image: ranking3,
              },
            },
            z: {
              width: 6,
              height: 6,
            },
            img3: {
              width: 22,
              height: 26,
              backgroundColor: {
                image: ranking4,
              },
            },
            img4: {
              width: 22,
              height: 26,
              backgroundColor: {
                image: ranking5,
              },
            },
            img5: {
              width: 22,
              height: 26,
              backgroundColor: {
                image: ranking6,
              },
            },
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: '#13387a',
          },
        },
      },

      {
        type: 'category',
        data: labelComp.value,
        inverse: true,
        axisLabel: {
          inside: true,
          verticalAlign: 'bottom',
          lineHeight: 42,
          margin: 0, //刻度标签与轴线之间的距离
          formatter: function (value, index) {
            return `{a|${valueComp.value[index]}}{u|单}`;
          },
          rich: {
            a: {
              fontSize: 14,
              fontFamily: 'fontShuHeiTi',
              color: '#73E3FF',
              padding: [0, 0, 0, 0],
            },
            u: {
              color: '#fff',
              fontSize: 12,
              fontFamily: 'fontShuHeiTi',
              padding: [2, 0, 0, 4],
            },
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: '#13387a',
          },
        },
      },
    ],
    series: [
      {
        data: valueComp.value,
        type: 'bar',
        barWidth: 8,
        showBackground: true,
        backgroundStyle: {
          color: '#D0DEEE1A',
        },
        itemStyle: {
          borderRadius: 40,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: '#148BCE', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#73E3FF', // 0% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        label: {
          show: true,
          position: 'insideRight',
          distance: -15,
          formatter: () => {
            return `{z|}{a|}`;
          },
          rich: {
            a: {
              widht: 30,
              height: 30,
              backgroundColor: {
                image: chartIcon,
              },
            },
          },
        },
      },
    ],
  };

  myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
#excellentPersonnelChart {
  // border: 1px solid red;
  width: 480px;
  height: 260px;
}
</style>
